{% extends 'layout.html' %}
{% load rbac %}
{% block content %}

    <div class="luffy-container">
        <div class="btn-group" style="margin: 5px 0">

            {% if request|has_permissions:"customer_add" %}
                <a class="btn btn-default" href="{% url 'customer_add' %}">
                    <i class="fa fa-plus-square" aria-hidden="true"></i> 添加客户
                </a>
            {% endif %}

            {% if request|has_permissions:"customer_import" %}
                <a class="btn btn-default" href="{% url 'customer_import' %}">
                    <i class="fa fa-file-excel-o" aria-hidden="true"></i> 批量导入
                </a>
            {% endif %}
        </div>
        <table class="table table-bordered table-hover">
            <thead>
            <tr>
                <th>ID</th>
                <th>客户姓名</th>
                <th>年龄</th>
                <th>邮箱</th>
                <th>公司</th>
                {% if request|has_permissions:"customer_add" or request|has_permissions:"customer_edit" %}
                    <th>选项</th>
                {% endif %}
            </tr>
            </thead>
            <tbody>
            {% for row in data_list %}
                <tr>
                    <td>{{ row.id }}</td>
                    <td>{{ row.name }}</td>
                    <td>{{ row.age }}</td>
                    <td>{{ row.email }}</td>
                    <td>{{ row.company }}</td>
                    <td>
                        {% if request|has_permissions:"customer_edit" %}
                            <a style="color: #333333;" href="{% url 'customer_edit' cid=row.id %}">
                                <i class="fa fa-edit" aria-hidden="true"></i>
                            </a>
                        {% endif %}
                        {% if request|has_permissions:"customer_del" %}
                            <a style="color: #d9534f;" href="/customer/del/{{ row.id }}/"><i class="fa fa-trash-o"></i>
                            </a>
                        {% endif %}
                    </td>

                </tr>
            {% endfor %}
            </tbody>
        </table>
    </div>
{% endblock %}